<template>
	<div>
		<ul class="item-list" >
			<li class="item" 
				v-for="item of letters" 
				:key="item"
				:ref="item"
				@click="handleClick"
				@touchstart.prevent="handleTouchStart"
				@touchmove="handleTouchMove"
				@touchend="handleTouchEnd"
			>
				{{item}}
			</li>
		</ul>
	</div>
</template>

<script>
		//touchstart.prevent 防止外层跟着动
export default{
	name: 'cityAlphabet',
	props:{
		cities:Object
	},
	data () {
		return {
			touchTag:false,
			startY:0,
			timer:null
		}
	},
	updated () {
		//				A距离顶部的值
			this.startY = this.$refs['A'][0].offsetTop
	},
	methods: {
		handleClick (e){
			this.$emit("change",e.toElement.innerText)
		},
		handleTouchStart () {
			this.touchTag=true
		},
		handleTouchMove (e) {
			if(this.touchTag){

//        手指距离浏览器顶部的距离
				const touchY=e.touches[0].clientY
//        手指所在的字母下标
				if(this.timer){
					clearTimeout(this.timer);
				}
				this.timer=setTimeout(()=>{
						const index=Math.floor((touchY-this.startY-89)/25)
							if(index >=0 && index<this.letters.length){
									this.$emit("change",this.letters[index])
							}
					},16);
				
			
			}
		},
		handleTouchEnd (){
			this.touchTag=false
		}
	},
	computed: {
		letters () {
//			???
			const letters=[];
			for(let i in this.cities){
				 letters.push(i)
			}
			return letters
		}
	}
}
</script>

<style lang="stylus" scoped>
 @import "~styles/varibles.styl";
 .item-list
	 	position:absolute
	 	right:0
	 	top:1.7rem
	 	bottom:0
	 	width:.5rem
	 	display:flex
	 	flex-direction:column
	 	justify-content:center
	 	.item
	 		line-height:.5rem
	 		font-size:.28rem
	 		text-align:center
	 		color:$bkColor
	
</style>